import { Button } from "antd";
import React, { useState } from "react";

function delay(ms: number = 0) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}

const RequestTracker: React.FC = () => {
  const [pending, setPending] = useState<number>(0);
  const [completed, setCompleted] = useState<number>(0);

  console.log("render...");

  async function handleClick() {
    setPending(pending + 1);
    await delay(3000);
    setPending(pending => pending - 1);
    setCompleted(completed => completed + 1);
  }

  return (
    <>
      <h3>Pending: {pending}</h3>
      <h3>Completed: {completed}</h3>
      <Button onClick={handleClick}>Buy</Button>
    </>
  );
};
export default RequestTracker;
